<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Scoped CSS Variables and JS</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <h2>Update CSS Variables with <span class="change-color">JS</span></h2>

    <div class="controls">
        <label for="spacing">Spacing:</label>
        <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

        <label for="blur">Blur:</label>
        <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">

        <label for="base">Base Color</label>
        <input type="color" name="base" value="#ffc600"><!-- 注意此处的 color 值 -->
        <br>

        <code class="result">
    		img {
    			padding: <label id="code-spacing">10px</label>;
    			filter: blur(<label id="code-blur">10px</label>);
    		  background: <label id="code-base">#8aa8af</label>;
    		}
    	</code>
    </div>

    <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">

    <script src="./script.js"></script>
</body>
</html>
